<template>
  <base-breadcrumb>
    <a-card>
      <title-name title="安全关键会议分类" />
      <a-button class="mb12" type="primary" @click="add">新增分类</a-button>
      <!--      <a-button class="mb12 ml12" type="primary" @click="$refs.table.refresh()">刷新</a-button>-->
      <b-table
        ref="table"
        :columns="columns"
        :request="loadData"
        :page-keys="['pageNo','pageSize','totalSize']"
        :show-page="false"
      >
        <div slot="actions" slot-scope="text, record" class="pub-table-list-action">
          <span @click="edit(record)">编辑</span>
          <span @click="del(record)">删除</span>
        </div>
      </b-table>
    </a-card>
    <add class="vue" :visible.sync="visible" :form="form" @ok="$refs.table.refresh()"></add>
  </base-breadcrumb>
</template>

<script>
import api from '@/api/safetySupervision/base/meetingType.js'
import add from './add'

export default {
  name: 'a' + Date.now(),
  components: {
    add
  },
  data() {
    return {
      form: {},
      visible: false,
      columns: [
        {
          title: '分类名称',
          dataIndex: 'name'
        },
        {
          title: '状态',
          dataIndex: 'enabled',
          width: 150,
          customRender: q => {
            return q === 'TRUE' ? '可用' : '不可用'
          }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 150,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      loadData: async (q) => await api.list({}, { ...q, query: { type: 12 } })
    }
  },
  methods: {
    del(record) {
      this.$delList2(
        api.del,
        (res) => {
          this.$refs.table.refresh()
        },
        { ids: [record.id] },
        null
      )
    },
    add() {
      this.form = { enabled: 'TRUE' }
      this.visible = true
    },
    edit(record) {
      this.form = { ...record }
      // this.form.enabled = this.form.enabled ? 1 : 0
      this.visible = true
    }
  }
}
</script>